// 源插件
import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import moment from 'moment';
import router from 'umi/router';

// 视图插件
import {
  Spin,
  Row,
  Col,
  Card,
  Form,
  Input,
  Select,
  Icon,
  Button,
  Dropdown,
  Menu,
  InputNumber,
  DatePicker,
  Modal,
  message,
  Badge,
  Divider,
  Steps,
  Radio,
  Upload,
} from 'antd';

// 外部组件
import StandardTable from '@/components/StandardTable';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';

// css OR less预编译器

// 图片

/**
 *  Created by xjc on 2019/8/15
 *  Describe:数据连接
 */

@connect(({ authority, loading }) => ({
  authority,
  loading: loading.models.AuthorityRule,
}))
@Form.create()
class UserDetail extends PureComponent {
  componentWillMount() {}

  /**
   *  Created by xjc on 2019/8/15
   *  Describe:当前状态
   */

  state = {
    valueList: [],
  };

  /**
   *  Created by xjc on 2019/5/21
   *  Describe:操控
   */

  selectHandleChange(value) {
    const { roles } = this.props;
    if (
      typeof roles.find(v => {
        return v.role === value[value.length - 1];
      }) !== 'undefined'
    ) {
      this.setState({
        valueList: value,
      });
    } else {
      this.setState({
        valueList: [],
      });
    }
  }

  handleChange() {
    const list = [];
    const { roles, dispatch, record } = this.props;
    const { valueList } = this.state;
    if (valueList.length === 0) {
      message.error('角色不可改为空');
      return;
    }
    const values = valueList; /* .split(",") */
    for (let i = 0; i < values.length; i++) {
      list.push(
        roles.find(v => {
          return v.role === values[i];
        }).id
      );
    }
    dispatch({
      type: 'authority/ChangeUserList',
      payload: {
        roleIds: list,
        userId: record.id,
      },
      callback: res => {
        if (res.code === 1) {
          message.success(res.message);
          this.props.closeUserDetail();
        } else {
          message.warning(res.message);
        }
      },
    });
  }

  cancelHandle() {
    this.props.closeUserDetail();
  }

  render() {
    const { valueList } = this.state;
    const { record, roles } = this.props;
    const { Option } = Select;
    const children = [];
    for (let i = 0; i < roles.length; i++) {
      children.push(<Option key={roles[i].role}>{roles[i].role}</Option>);
    }

    return (
      <Modal
        destroyOnClose
        title="用户角色信息详情"
        visible
        centered
        onOk={this.handleChange.bind(this)}
        onCancel={this.cancelHandle.bind(this)}
      >
        <Select
          mode="tags"
          style={{ width: '90%' }}
          placeholder="角色"
          value={valueList}
          onChange={this.selectHandleChange.bind(this)}
        >
          {children}
        </Select>
      </Modal>
    );
  }

  componentDidMount() {
    const { record, roles } = this.props;
    let defaultValue = [];
    if (record.roles instanceof Array) {
      defaultValue = record.roles.split(',');
    }
    this.setState({
      valueList: defaultValue,
    });
  }

  componentWillUnmount() {}
}

export default UserDetail;
